<template>
  <view class="box">
    <view>
      <textarea
          v-model="content"
          auto-height
          ref="input"
          @input="getInput"
          @focus="getFocus"
          @click="getClick"
          class="textarea" placeholder="输入内容"></textarea>
    </view>
    <view style="height: 10rpx"></view>
    <scroll-view style="height: 500rpx" scroll-y>
      <view class="open-box">
        <view>
          <view class="emoji-item"
                @click="content += emoji"
                v-for="(emoji, index) in emojis"
                :key="index">{{ emoji }}
          </view>
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      cursor: 0,
      content: '',
      emojis: [
        '\uC001', '\uC002', '\uC003', '\uC004', '\uC005', '\uC006', '\uc007', '\uc008', '\uC009', '\uC010', '\uC011',
        '\uC012', '\uC013', '\uC014', '\uC015', '\uC016', '\uC017', '\uC018', '\uC019', '\uC020', '\uC021',
        '\uC022', '\uC023', '\uC024', '\uC025', '\uC026', '\uC027', '\uC028', '\uC029', '\uC030', '\uC031',
        '\uC032', '\uC033', '\uC034', '\uC035', '\uC036', '\uC037', '\uC038', '\uC039', '\uC040', '\uC041', '\uC042',
        '\uC043', '\uC044', '\uC045', '\uC046', '\uC047', '\uC048', '\uC049', '\uC050', '\uC051', '\uC052', '\uC053',
        '\uC054', '\uC055', '\uC056', '\uC057', '\uC058', '\uC059', '\uC060', '\uC061', '\uC062', '\uC063', '\uC064',
        '\uC065', '\uC066', '\uC067', '\uC068', '\uC069', '\uC070', '\uC071', '\uC072', '\uC073', '\uC074', '\uC075',
        '\uC076', '\uC077', '\uC078', '\uC079', '\uC080', '\uC081', '\uC082', '\uC083', '\uC084', '\uC085', '\uC086', '\uC087',
        '\uC088', '\uC089', '\uC090', '\uC091', '\uC092', '\uC093', '\uC094', '\uC095', '\uC096', '\uC097', '\uC098', '\uC099', '\uC100',
        '\uC101', '\uC102', '\uC103', '\uC104', '\uC105', '\uC106', '\uC107', '\uC108', '\uC109', '\uC110', '\uC111', '\uC112', '\uC113',
        '\uC114', '\uC115', '\uC116', '\uC117', '\uC118', '\uC119', '\uC120', '\uC121', '\uC122', '\uC123', '\uC124', '\uC125', '\uC126',
        '\uC127', '\uC128', '\uC129', '\uC130', '\uC131', '\uC132', '\uC133', '\uC134', '\uC135', '\uC136', '\uC137', '\uC138', '\uC139',
        '\uC140', '\uC141', '\uC142', '\uC143', '\uC144', '\uC145', '\uC146', '\uC147', '\uC148', '\uC149', '\uC150', '\uC151', '\uC152',
        '\uC153', '\uC154', '\uC155', '\uC156', '\uC157', '\uC158', '\uC159', '\uC160', '\uC161', '\uC162', '\uC163', '\uC164', '\uC165',
        '\uC166', '\uC167', '\uC168', '\uC169', '\uC170', '\uC171', '\uC172', '\uC173', '\uC174', '\uC175', '\uC176', '\uC177', '\uC178',
        '\uC179', '\uC180', '\uC181', '\uC182', '\uC183', '\uC184', '\uC185', '\uC186', '\uC187', '\uC188', '\uC189', '\uC190', '\uC191',
        '\uC192', '\uC193', '\uC194', '\uC195', '\uC196', '\uC197', '\uC198', '\uC199', '\uC200', '\uC201', '\uC202', '\uC203', '\uC204',
        '\uC205', '\uC206', '\uC207', '\uC208', '\uC209', '\uC210', '\uC211', '\uC212', '\uC213', '\uC214', '\uC215', '\uC216', '\uC217',
        '\uC218', '\uC219', '\uC220', '\uC221', '\uC222', '\uC223', '\uC224', '\uC225', '\uC226', '\uC227', '\uC228', '\uC229', '\uC230',
        '\uC231', '\uC232', '\uC233', '\uC234', '\uC235', '\uC236', '\uC237', '\uC238', '\uC239', '\uC240', '\uC241', '\uC242', '\uC243',
        '\uC244', '\uC245', '\uC246', '\uC247', '\uC248', '\uC249', '\uC250', '\uC251', '\uC252', '\uC253', '\uC254', '\uC255', '\uC256',
        '\uC257', '\uC258', '\uC259', '\uC260', '\uC261', '\uC262', '\uC263', '\uC264', '\uC265', '\uC266', '\uC267', '\uC268', '\uC269',
        '\uC270', '\uC271', '\uC272', '\uC273', '\uC274', '\uC275', '\uC276', '\uC277', '\uC278', '\uC279', '\uC280', '\uC281', '\uC282',
        '\uC283', '\uC284', '\uC285', '\uC286', '\uC287', '\uC288', '\uC289', '\uC290', '\uC291', '\uC292', '\uC293', '\uC294', '\uC295',
        '\uC296', '\uC297', '\uC298', '\uC299', '\uC300', '\uC301', '\uC302'
      ]
    }
  },
  mounted() {
    setTimeout(()=>{
      this.$refs.input.focus()
    },100);

  },
  methods: {
    getInput(e) {
      console.log(e);
      // 获取光标位置
      const cursor = e.detail.cursor;
      this.cursor = cursor;
      console.log(cursor);
    },
    getFocus(e) {
      console.log(e);
    },
    getClick(e) {
      console.log(e);
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.box {
  position: fixed;
  bottom: 0;
  background-color: #f2f2f2;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx 20rpx 0 0;
}

.textarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 32rpx;
  background-color: #FFFFFF;
  border-radius: 10px;
}

.open-box {
  text-align: center;

  .emoji-item {
    display: inline-block;
    width: 100rpx;
    height: 100rpx;
    text-align: center;
    font-size: 60rpx;
  }

  .emoji-item:active {
    transform: scale(.9);
    background-color: #f0f0f0;
    border-radius: 10rpx;
  }
}


</style>
